<template>
  <div class="dashboard-editor-container">
    <el-form :model="queryParams" ref="queryForm" size="nomal" :inline="true" label-width="88px">
          <el-form-item label="查询时间段" prop="times">
            <el-date-picker
              v-model="queryParams.times"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="nomal" @click="handleQuery">搜索</el-button>
          </el-form-item>
        </el-form>
    <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;" >
      <!-- <line-chart :chart-data="lineChartData" /> -->
       <!-- 改为折柱混合 -->
       <pie-chart :chart-data="lineAndBarChartData" />
    </el-row>
    
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <line-chart  :chart-data="lineAndBarChartData"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <bar-chart :chart-data="lineAndBarChartData"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from '../dashboard/PanelGroup.vue'
import LineChart from '../dashboard/LineChart'
import RaddarChart from '../dashboard/RaddarChart'
import PieChart from '../dashboard/PieChart'
import BarChart from '../dashboard/BarChart'
import { getanalysisListByTimes } from "@/api/system/statisticalAnalysis";


 
export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      // // 查询参数
      queryParams: {
        // startTime: undefined,
        // endTime: undefined,
        times:undefined,
      },
      analysisDate:undefined,
      analysisDates:undefined,
      lineAndBarChartData: {
        legendData:[ '总营收（元）', '总成本（元）', '总利润（元）'] ,
        xAxisData: [],
        // xAxisData: ["2024 年 4 月","2024 年 5 月","2024 年 6 月","2024 年 7 月","2024 年 8 月","2024 年 9 月","2024 年 10 月","2024 年 11 月","2024 年 12 月","2025 年 1 月","2025 年 2 月","2025 年 3 月"],
        yAxisAll:[
              {
                type: 'value',
                name: '总营收（元）',
                data: [],
                yAxisIndex: 0,
                // data: [115000,119100,125000,139100,145000,130900,125000,115000,135000,130900,119100,139100],
                axisPointer: {
                  type: 'shadow'
                }
                // min: 0,
                // max: 250,
                // interval: 50,
                // axisLabel: {
                //   formatter: '{value} ml'
                // }
              },
              {
                type: 'value',
                name: '总成本（元）',
                data: [],
                yAxisIndex: 1
                // data: [38000,40000,39500,42500,43000,41000,40500,38500,42000,41500,39000,43500]
              }
        ],
        lineAndPieSeries: [
            {
              name: '总营收（元）',
              type: 'bar',
              data: []
              // data: [115000,119100,125000,139100,145000,130900,125000,115000,135000,130900,119100,139100]
            },
            {
              name: '总成本（元）',
              type: 'bar',
              data: []
              // data: [38000,40000,39500,42500,43000,41000,40500,38500,42000,41500,39000,43500]
            },
            {
              name: '总利润（元）',
              type: 'line',
              yAxisIndex: 1,
              data: []
              // data: [77000,79100,85500,96600,102000,89900,84500,76500,93000,89400,80100,95600]
            }
        ],
        lineSeriesData:[
          {
            name: '总营收（元）',
            type: 'line',
            stack: 'Total',
            data: []
            // data: [115000,119100,125000,139100,145000,130900,125000,115000,135000,130900,119100,139100]
          },
          {
            name: '总成本（元）',
            type: 'line',
            stack: 'Total',
            data: []
            // data: [38000,40000,39500,42500,43000,41000,40500,38500,42000,41500,39000,43500]
          },
          {
            name: '总利润（元）',
            type: 'line',
            stack: 'Total',
            data: []
            // data: [77000,79100,85500,96600,102000,89900,84500,76500,93000,89400,80100,95600]
          },
        ],
        source: [
          ['product', '总营收（元）', '总成本（元）', '总利润（元）']
        ],
        // source: [
        //   ['product', '总营收（元）', '总成本（元）', '总利润（元）'],
        //   ['2024年4月','115000','38000','77000'],
        //   ['2024年5月', '119100', '40000', '79100'],
        //   ['2024年6月', '125000', '39500', '85500'],
        //   ['2024年7月', '139100', '42500', '96600'],
        //   ['2024年8月', '145000', '43000', '102000'],
        //   ['2024年9月', '130900', '41000', '89900'],
        //   ['2024年10月', '125000', '40500', '84500'],
        //   ['2024年11月', '115000', '38500', '76500'],
        //   ['2024年12月', '135000', '42000', '93000'],
        //   ['2025年1月', '130900', '41500', '89400'],
        //   ['2025年2月', '119100', '39000', '80100'],
        //   ['2025年3月', '139100', '43500', '95600']
        //   // ['Matcha Latte', 43.3, 85.8, 93.7],
        //   // ['Milk Tea', 83.1, 73.4, 55.1],
        //   // ['Cheese Cocoa', 86.4, 65.2, 82.5],
        //   // ['Walnut Brownie', 72.4, 53.9, 39.1]
        // ],
      },
    }
  },
  created() {
    this.getList();
  },
  methods: {
     /** 搜索按钮操作 */
     handleQuery() {
      this.getList();
    },
     /** 查询参数列表 */
     getList() {
        this.loading = true;
        this.analysisDate = this.queryParams.times!=undefined? this.formatDateToYearMonth(this.queryParams.times[0]) : "";
        this.analysisDates = this.queryParams.times!=undefined? this.formatDateToYearMonth(this.queryParams.times[1]) : "";
        getanalysisListByTimes(this.addDateRange({analysisDate:this.analysisDate, analysisDates:this.analysisDates})).then(response => {
           // 提取 xAxisData 需要的日期数据
            this.lineAndBarChartData.xAxisData = response.rows.map(item => this.formatDate(item.analysisDate));
            // 初始化 dataset.source 数据
            const initSource = [['product', '总营收（元）', '总成本（元）', '总利润（元）']];
            // 遍历响应数据，填充 yAxisAll 和 lineAndPieSeries 的数据
            response.rows.forEach(item => {
                const { analysisRevenue, analysisCost, analysisProfit } = item;
                const formattedDate = this.formatDate(item.analysisDate);
                // 正确引用 this.lineAndBarChartData 下的 yAxisAll 和 lineAndPieSeries
                this.lineAndBarChartData.yAxisAll[0].data.push(analysisRevenue);
                this.lineAndBarChartData.lineAndPieSeries[0].data.push(analysisRevenue);
                this.lineAndBarChartData.lineSeriesData[0].data.push(analysisRevenue);
                this.lineAndBarChartData.yAxisAll[1].data.push(analysisCost);
                this.lineAndBarChartData.lineAndPieSeries[1].data.push(analysisCost);
                this.lineAndBarChartData.lineSeriesData[1].data.push(analysisCost);
                this.lineAndBarChartData.lineAndPieSeries[2].data.push(analysisProfit);
                this.lineAndBarChartData.lineSeriesData[2].data.push(analysisProfit);
                 // 填充 dataset.source 的数据
                 initSource.push([formattedDate, analysisRevenue, analysisCost, analysisProfit]);
            });
            // 更新 lineAndBarChartData.source
            this.lineAndBarChartData.source = initSource;
            this.total = response.total;
            this.loading = false;
          });   
      },
      // 封装日期格式化函数2025-04
      formatDateToYearMonth(dateStr) {
        const date = new Date(dateStr);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        return `${year}-${month}`;
      },
      //接口中的时间转换成2025年04月
      formatDate(dateStr) {
        const date = new Date(dateStr);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        return `${year}年${month}月`;
      }
    // handleSetLineChartData(type) {
    //   this.lineAndBarChartData=allChartData[type]
    //   console.log("点击事件后数据的变化"+type);
    // }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
